<template>
  <div id="headBox" class="pageNormalBackground">
    <headerT title="我的钱包" />
    <div class="headMarginTop boxMain">
      <div class="walletCard">
        <div class="integral">
          <div class="xianyJifen">现有积分</div>
          <div class="displayFlex jifenBox">
            <div class="jienNum">{{userInfo.integral}}</div>
            <div class="jifenYw" @click="getSignExplainList">?</div>
          </div>
          <div class="displayFlex moneyAndIntegral">
            <p>可提现金￥{{userInfo.balance}}</p>
            <p class="integralborder">本月积分{{monthIntegralNum}}</p>
          </div>
        </div>

        <div class="displayFlex cardBottom">
          <div class="exchangeMoney" @click="toExchange(1)">兑换现金</div>
          <div class="getMoney" @click="toExchange(2)">立即提现</div>
        </div>
      </div>
      <div class="everyBlockBgcolor walletQiandao">
        <div class="displayFlex qdWord">
          <div class="qdTitle">
            <p class="dayQd">每日签到</p>
            <p class="daka">打卡领积分</p>
          </div>
          <div class="qdImg" @click="getSign">立即签到</div>
          <!-- <img src="/static/images/ljqd.png" alt="" /> -->
        </div>
        <div class="day">
          <div class="weekBox" v-if="qdList.length!=0">
            <div class="displayFlex weekTop">
              <!-- :class="{'weekYuan':item.type==2 && item.sign==0,'activeThis':item.type==1 && item.sign==0,'activeYiqian':item.sign>=1 && item.type==1,'activeQdLine':item.type==1&&item.sign>=1}" -->
              <div
                v-for="(item,index) in qdList"
                :key="index"
                :class="{'weekYuan':item.type==2 && item.sign==0,'activeThis':item.type==1 && item.sign==0,'activeYiqian':item.sign>=1 && item.type==1,'activeQdLine':item.type==1&&item.sign>=1}"
              ></div>
            </div>
            <div class="displayFlex weekBottom">
              <p>一</p>
              <p>二</p>
              <p>三</p>
              <p>四</p>
              <p>五</p>
              <p>六</p>
              <p>日</p>
            </div>
          </div>
          <div class="weekBox_noData" v-else>暂无签到数据</div>
        </div>
      </div>
      <div class="displayFlex exchangeTab">
        <div :class="flag==1?'active':''" @click="tabExchange(1)">积分记录</div>
        <div :class="flag==2?'active':''" @click="tabExchange(2)">兑换记录</div>
        <div :class="flag==3?'active':''" @click="tabExchange(3)">提现记录</div>
      </div>

      <div class="everyBlockBgcolor exchangeMain" v-if="flag==1">
        <div v-if="integralList.length!=0">
          <div class="displayFlex exchangeList" v-for="(item,index) in integralList" :key="index">
            <div class="exchangeTitle">
              <p class="exchangeTitlep1">积分</p>
              <p class="exchangeTitleTime">{{item.created_at}}</p>
            </div>
            <div class="exJifen">+ {{item.integral}} 积分</div>
          </div>
        </div>
        <div v-if="integralList.length==0" class="noData">暂无数据</div>
      </div>
      <div class="everyBlockBgcolor exchangeMain" v-if="flag==2">
        <div v-if="balanceList.length!=0">
          <div class="displayFlex exchangeList" v-for="(item,index) in balanceList" :key="index">
            <div class="exchangeTitle">
              <p class="exchangeTitlep1">兑换现金￥{{item.balance}}</p>
              <p class="exchangeTitleTime">{{item.created_at}}</p>
            </div>
            <div class="exJifen">- {{item.integral}} 积分</div>
          </div>
        </div>
        <div v-if="balanceList.length==0" class="noData">暂无数据</div>
      </div>
      <div class="everyBlockBgcolor exchangeMain" v-if="flag==3">
        <div v-if="depositList.length!=0">
          <div class="displayFlex exchangeList" v-for="(item,index) in depositList" :key="index">
            <div class="exchangeTitle">
              <p class="exchangeTitlep1">{{item.deposit_no}}</p>
              <p class="exchangeTitleTime">{{item.created_at}}</p>
            </div>
            <div class="exJifen">-￥{{item.balance}}</div>
          </div>
        </div>
        <div v-if="depositList.length==0" class="noData">暂无数据</div>
      </div>
    </div>

    <div class="isQuestions" v-if="isQuestionsFlag" >
      <div class="everyBlockBgcolor questions">
        
        <div class="qdRule">
          <p>签到规则</p>
          <p v-if="qdRulesContent!=null">{{qdRulesContent.explain}}</p>
        </div>
        <div class="close" @click="isQuestionsFlag=false">X</div>
      </div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import { wallet,balanceList,integralList,depositList,userSign,signExplainList } from "@/services/personCenter";

export default {
  components: {
    headerT
  },
  name: "",

  data() {
    return {
      flag: 1,
      loading: false,
      integralInfo: {
        page: 1,
        pageSize: 10
      }, //积分数据
      integralTotalPage: 0, //积分总页数
      integralList: [], //积分列表
      xianjinInfo: {
        page: 1,
        pageSize: 10
      }, //现金数据
      xianjinTotalPage: 0, //现在总页数
      balanceList: [], //积分兑换现金记录列表
      depositInfo: {
        page: 1,
        pageSize: 10
      }, //现金数据
      depositTotalPage: 0, //现在总页数
      depositList: [], //提现记录
      userInfo: {}, //获取积分、现金信息
      monthIntegralNum: 0, //本月积分
      qdList: [], //签到数据
      isQuestionsFlag:false,
      qdRulesContent:'',//签到规则内容
    };
  },
  created() {
    this.getIntegralList();
    this.getWallet();
  },
  watch: {
    isQuestionsFlag (val) {//监听页面是否滚动（弹出层出现，页面禁止滚动）
      console.log(val,'vaaa')
      if(val){
        document.body.style.overflow = 'hidden'
        document.addEventListener('touchmove', this.preD, {passive: false}) // 禁止页面滑动
      }else{
        document.body.style.overflow = ''
        document.removeEventListener('touchmove', this.preD, {passive: false})
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    preD(e){//阻止事件的默认
      e.preventDefault()
    },
    getSignExplainList(){//签到规则
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(signExplainList)
        .then(res => {
          this.$vux.loading.hide();
          if (res.code == 200) {
            this.qdRulesContent=res.data
            this.$vux.toast.show({
              text: res.message,
              position: "top",
              type: "text"
            });
            this.isQuestionsFlag=true
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    getSign() {
      //签到
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(userSign)
        .then(res => {
          this.$vux.loading.hide();
          if (res.code == 200) {
            
            this.$vux.toast.text(res.message, 'middle')
            this.getWallet();
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    getWallet() {
      //我的钱包数据
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(wallet, {})
        .then(res => {
          this.$vux.loading.hide();
          this.monthIntegralNum = res.data;
          this.qdList = res.sign;
          console.log(this.qdList, "qdlist");
          if (res.userInfo != null) {
            this.userInfo = res.userInfo;
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    handleScroll() {
      //分页加载数据
      const _this = this;
      if (
        document.documentElement.scrollTop + window.innerHeight >=
        document.body.offsetHeight
      ) {
        if (_this.flag == 1) {
          if (_this.integralInfo.page >= _this.integralTotalPage) {
            return;
          } else {
            _this.integralInfo.page = _this.integralInfo.page + 1;
            _this.getIntegralList();
          }
        } else if (_this.flag == 2) {
          if (_this.xianjinInfo.page >= _this.xianjinTotalPage) {
            return;
          } else {
            _this.xianjinInfo.page = _this.xianjinInfo.page + 1;
            _this.getUserBalanceList();
          }
        } else if (_this.flag == 3) {
          if (_this.depositInfo.page >= _this.depositTotalPage) {
            return;
          } else {
            _this.depositInfo.page = _this.depositInfo.page + 1;
            _this.getDepositList();
          }
        }
      }
    },
    getDepositList() {
      //提现记录
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(depositList, this.depositInfo)
        .then(res => {
          this.$vux.loading.hide();
          this.depositTotalPage = res.data.last_page;
          if (this.depositInfo.page == 1) {
            this.depositList = res.data.data;
            this.depositInfo.page = res.data.current_page;
          } else {
            this.depositList = [...this.depositList, ...res.data.data];
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    getUserBalanceList() {
      //现金兑换记录
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(balanceList, this.xianjinInfo)
        .then(res => {
          this.$vux.loading.hide();
          this.xianjinTotalPage = res.data.last_page;
          if (this.xianjinInfo.page == 1) {
            this.balanceList = res.data.data;
            this.xianjinInfo.page = res.data.current_page;
          } else {
            this.balanceList = [...this.balanceList, ...res.data.data];
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    getIntegralList() {
      //积分记录
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(integralList, this.integralInfo)
        .then(res => {
          this.$vux.loading.hide();
          this.integralTotalPage = res.data.last_page;
          if (this.integralInfo.page == 1) {
            this.integralList = res.data.data;
            this.integralInfo.page = res.data.current_page;
          } else {
            this.integralList = [...this.integralList, ...res.data.data];
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    toExchange(num) {
      if (num == 1) {
        this.$tools.goPage("/exchange");
      } else if (num == 2) {
        this.$tools.goPage("/tixian");
      }
    },
    tabExchange(num) {//切换
    console.log(num,'num')
      this.flag = num;
      switch (num) {
        case 1:
          this.integralInfo.page = 1;
          this.getIntegralList();
          break;
        case 2:
          this.xianjinInfo.page = 1;
          this.getUserBalanceList();
          break;
        case 3:
          this.depositInfo.page = 1;
          this.getDepositList();
          break;
        default:
          break;
      }
    },
    
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
@colorRed: #f64135;
@colorGay: #f6f6f6;
@fontsize32: 0.32rem;
#headBox {
  .boxMain {
    padding: 0.34rem 0.2rem 1.4rem 0.17rem;
    .walletCard {
      box-sizing: border-box;
      // height: 5.2rem;
      background: linear-gradient(
        123deg,
        rgba(109, 111, 132, 1) 0%,
        rgba(74, 74, 88, 1) 100%
      );
      box-shadow: 0rem 0rem 0rem rgba(225, 225, 225, 1);
      border-radius: 0.1rem;
      font-size: @fontsize32;
      color: #ffffff;
      .integral {
        .xianyJifen {
          font-size: 0.3rem;
          padding: 0.39rem 0.84rem 0 0.84rem;
          color: @colorGay;
          opacity: 0.5;
        }
        .jifenBox {
          padding: 0rem 0.76rem 0rem 0.84rem;
          justify-content: space-between;
          height: 1.9rem;
          .jienNum {
            font-size: 1.23rem;
          }
          .jifenYw {
            width: 0.44rem;
            height: 0.44rem;
            line-height: 0.44rem;
            background: #ffc356;
            border-radius: 50%;
            text-align: center;
          }
        }
        .moneyAndIntegral {
          justify-content: space-between;
          padding: 0rem 0.84rem 0.57rem 0.84rem;
          font-size: 0.32rem;
          opacity: 0.5;
          p {
            width: 50%;
          }
          .integralborder {
            border-left: 1px solid #8f8f8f;
            text-align: center;
          }
        }
      }
      .cardBottom {
        div {
          width: 50%;
          height: 1.34rem;
          text-align: center;
          line-height: 1.34rem;
          font-size: 0.34rem;
        }
        .exchangeMoney {
          background: linear-gradient(
            135deg,
            rgba(106, 107, 122, 1) 0%,
            rgba(83, 83, 88, 1) 100%
          );
          opacity: 0.48;
          color: #ffc337;
          border-bottom-left-radius:0.1rem;
        }
        .getMoney {
          background: linear-gradient(
            90deg,
            rgba(246, 65, 53, 1) 0%,
            rgba(255, 205, 88, 1) 100%
          );
          border-bottom-right-radius:0.1rem;
        }
      }
    }

    .walletQiandao {
      height: 3.55rem;
      margin: 0.33rem 0;
      padding: 0 0rem 0 0.47rem;
      .qdWord {
        justify-content: space-between;
        .qdTitle {
          .dayQd {
            font-size: 0.44rem;
            color: #4e4e4e;
          }
          .daka {
            font-size: @fontsize32;
            color: #9f9f9f;
          }
        }
        .qdImg {
          width: 2.61rem;
          height: 1.63rem;
          background-image: url("../../../../static/images/ljqd.png");
          background-size: 100%;
          font-size: @fontsize32;
          color: #ffffff;
          line-height: 1.46rem;
          text-align: center;
        }
      }
      .day {
        padding-right: 0.42rem;
        font-size: 0.25rem;
        color: #4e4e4e;
        
        .weekBox_noData{
          font-size: 0.34rem;
          color: #C8C8C8;
          text-align: center;
          line-height: 1.2rem;
        }
        .weekBox {
          height: 1.8rem;

          .weekTop {
            height: 0.44rem;
            background-image: url("../../../../static/images/weekuang.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center;
            justify-content: space-between;
            margin: 0.4rem 0;

            .weekYuan {
              width: 0.44rem;
              height: 0.44rem;
              background: #fbdd9d;
              border-radius: 50%;
              position: relative;
            }
            .activeYiqian {
              width: 0.44rem;
              height: 0.44rem;
              background-image: url("../../../../static/images/yqd.png");
              background-repeat: no-repeat;
              background-size: 100%;
              background-position: center;
              position: relative;
            }
            .activeThis {
              width: 0.44rem;
              height: 0.44rem;
              background-image: url("../../../../static/images/wqd.png");
              background-repeat: no-repeat;
              background-size: 100%;
              background-position: center;
              position: relative;
            }
            .activeQdLine:after {
              content: "";
              width: 0.9rem;
              height: 0.1rem;
              background: #fec448;
              border-radius: 1rem;
              position: absolute;
              top: 50%;
              // transform: translate(0.44rem, -50%);
              transform: translate(-0.93rem, -50%);
            }
            // .activeQdLine:last-child:after {
            //   background: none;
            // }
            .activeQdLine:first-child:after {
              background: none;
            }
          }

          .weekBottom {
            justify-content: space-between;
            // margin-top: 0.3rem;
            p {
              width: 0.44rem;
              height: 0.44rem;
              text-align: center;
            }
          }
        }
      }
    }
    .exchangeTab {
      padding: 0.62rem 0.44rem 0.34rem 0.44rem;
      font-size: 0.34rem;
      color: #4e4e4e;
      font-weight: bold;
      div {
        margin-right: 0.44rem;
      }
      .active {
        font-size: 0.44rem;
        color: #f9bf41;
      }
    }
    .exchangeMain {
      padding: 0 0.37rem;
      .exchangeList {
        height: 1.8rem;
        border-bottom: 1px solid #ebebeb;
        justify-content: space-between;
        color: #4e4e4e;
        .exchangeTitle {
          .exchangeTitlep1 {
            font-size: 0.37rem;
            font-weight: bold;
          }
          .exchangeTitleTime {
            font-size: 0.3rem;
            color: #9f9f9f;
          }
        }
        .exJifen {
          font-size: @fontsize32;
        }
      }
    }
  }
}

.isQuestions{
  position: fixed;
  width: 100%;
  height: 100%;
  background: RGBA(0, 0, 0, 0.2);
  top: 1.2rem;
  z-index: 99;
  .questions{
    width: 80%;
    // position: relative;
    // top: 50%;
    // transform: translateY(-50%);
    margin: 4rem auto;
    border-radius: 0.14rem;
    font-size: 0.32rem;
    padding: 0.3rem;
    position: relative;
    .qdRule{
      p:first-child{
        font-weight: bold;
        font-size: 0.34rem;
      }
      p:last-child{
        text-indent: 0.7rem;
        line-height: 0.6rem;
        color: #8f8f8f;
        margin-top: 0.3rem;
      }

    }
    .close{
      font-size: 0.4rem;
      font-weight: bold;
      position: absolute;
      // border: 1px solid red;
      top: 0rem;
      right: 0rem;;
      padding: 0 0.3rem;
      color: #9f9f9f;
    }
  }
}
</style>
